
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/productionBasismanag/numberManagement/number" style="color: #409eff;">号码管理</router-link></div>
          <div class="hei10"></div>
          
				<div class="tools">
                    <div class="title">联通营业厅下单工具</div>
                    <div class="fm" v-loading="ordering" element-loading-text="拼命下单中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                        <el-form ref="form" :model="form" @submit.native.prevent label-width="120px">
                            <el-form-item class="mobile" label="联通手机号">
                                <el-input v-model="form.mobile"></el-input>
                                <el-button class="mobilebtn" type="primary" @click="getcode" :disabled="jinyong" size="mini">{{tishi}}</el-button>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input v-model="form.code"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="danger" size="mini" @click="go" >开始下单</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="ordernum" v-if="ordering">
                        <div style="padding-bottom: 30px;">下单条数：{{num}}</div>
                        <div><el-button type="danger" size="mini" @click="go" >停止下单</el-button></div>
                    </div>
                    
                </div>
			</div>
		</div>
        <!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from "axios";
	import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
            "top": top,
            "foot": foot
		},
		name: 'order_tools',
		data(){
			return{
                form:{
                    mobile:"",
                    code:""
                },
				
                ordering:true,
                num:10,
                count: 60,
                tishi:"获取验证码",
                jinyong:false,
			}
		},
		created() {
			// this.getnum()
		},
        methods:{
            //获取验证码
            getcode:function(){
                var that = this
                if(this.form.mobile == ""){this.$message.error("请先输入手机号！"); return false;}
                axios.post('/api/plan-market/numbers/import', {mobile:this.form.mobile})
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                			this.daojishi()
                		}
                	})
            },
            //开始下单
            go:function(){
                var that = this
                if(this.form.code == ""){this.$message.error("请先输入验证码！"); return false;}
                axios.post('/api/plan-market/numbers/import', {code:this.form.code})
                	.then(response => {
                		if(response.data.msg.code != 0){
                			this.$message.error(response.data.msg.info);
                		}else{
                			
                		}
                	})
            },
            //获取下单数量
            getnum:function(){
                // var that = this
                // this.num++
                // setTimeout(function(){that.getnum()},1000)
               
                // var that = this
                // if(this.form.code == ""){this.$message.error("请先输入验证码！"); return false;}
                // axios.post('/api/plan-market/numbers/import', {code:this.form.code})
                // 	.then(response => {
                // 		if(response.data.msg.code != 0){
                // 			this.$message.error(response.data.msg.info);
                // 		}else{
                // 			
                // 		}
                // 	})
            },
            //倒计时功能
            daojishi:function(){
            	var interval;
            	interval = window.setInterval(() => {
            		if(this.count <= 0){
            			window.clearInterval(interval)
            			this.tishi = "获取验证码",
            			this.jinyong = false
            			this.count = 60
            		}else{
            			this.count -= 1;
            			this.tishi = this.count+"秒重新获取"
            			this.jinyong = true
            		}
            	}, 1000);
            }
        }
	}
</script>

<style lang="scss" scoped>
	.index{
		
            .tools{ display: flex; padding: 20px; border-bottom: 1px #eaeaea solid;
                .title{ padding-top: 10px; color: #666; padding-right: 20px;}
                .fm{
                    .el-input__inner{ width: 280px;}
                    .mobile{ position: relative;}
                    .mobilebtn{ position: absolute; right: 5px; top: 6px;}
                }
                .ordernum{ padding-left: 20px; padding-top: 10px; color: #666; padding-right: 20px;}
            }
		
	}
</style>
